<script setup>
	import {
		ref,
		onMounted,
	} from "vue";
	import {
		navigateBack,
		navigateToMemorialHall,
	} from "@/assets/scripts/navigate.js"
	import {
		getMsgApi,
	} from "@/assets/api/other/memorialHall.js"
	import titleColumn from '@/components/titleColumn.vue'
	import leaveMessageCard from '@/components/leaveMessageCard.vue'

	const leaveMessageList = ref([])
	const pageNum = ref(1)
	const total = ref(10)
	const loading = ref(true)

	const handleMore = () => {
		if (loading.value) return
		loading.value = true
		pageNum.value = pageNum.value + 1
		leaveMessageList_init()
	}

	onMounted(() => {
		leaveMessageList_init()
	})

	const leaveMessageList_init = async () => {
		const res = await getMsgApi("", pageNum.value)
		if (res.code === 200) {
			total.value = res.total
			const rows = res.total <= (pageNum.value - 1) * 10 ? [] : res.rows
			leaveMessageList.value = [...leaveMessageList.value.slice(0, (pageNum.value - 1) * 10), ...rows]
			loading.value = false
		}
	}
</script>

<template>
	<view class="">
		<uv-navbar :fixed="false" bgColor="#f5f5f5" title="留言列表">
			<template v-slot:left>
				<view class="d-flex d-flex-aic" @click="navigateBack">
					<uv-icon name="arrow-left" color="#fff" size="19"></uv-icon>
					返回纪念馆
					<!-- <uv-icon class="ml-small" name="home" color="#fff"
						@click="redirectToMemorialHall(meMemorialId, 1)" size="20"></uv-icon> -->
				</view>
			</template>
		</uv-navbar>
		<!-- 留言列表 -->
		<uv-row class="p-normal pt-small mt-normal">
			<uv-col>
				<titleColumn :isShowMore='false'>
					<template #title>
						<view>留言列表</view>
					</template>
					<template #content>
						<view class="pb-small">
							<uv-empty class="py-normal" mode="list" icon="empty-favor" style="background-color: #fff"
								v-if="!leaveMessageList.length"></uv-empty>
							<uv-row class="mb-normal" v-for="(item,index) in leaveMessageList" :key="index"
								@click="navigateToMemorialHall(item.meMemorialId)">
								<uv-col>
									<leaveMessageCard :data="item"></leaveMessageCard>
								</uv-col>
							</uv-row>
							<uv-button class="mb-normal" v-if="!loading && total > pageNum * 10" type="success"
								text="查看更多" @click="handleMore"></uv-button>
						</view>
					</template>
				</titleColumn>
			</uv-col>
		</uv-row>
	</view>
</template>

<style lang="scss" scoped>
</style>